<script setup lang="ts">
import ReCol from "@/components/ReCol";
import { ref,onMounted,toRaw } from "vue";
import { formRules } from "./utils/rule";
import { FormProps,showSizeOptions } from "./utils/types";
import {usePublicHooks} from "@/views/system/hooks";
import {getDictValueList, getUserList } from "@/api/system";
const { switchStyle } = usePublicHooks();

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    shop_name: "",
    id: 0,
    standard_code: "USD",
    exchange_rate: 0.0,
    profit_offset: 0.0,
    after_sale_fee: 0.0,
    commission: 0.0,
    spec_discount: 0,
    reserve_fee: 0.0,
    size: 1,
    admin_id: 1,
    sale_state: [],
    status: 1,
    api_secretkey:''
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}
const dataList = ref([]);
const userList = ref([]);
const isLinkage = ref(false);
defineExpose({ getRef });
const webhooks_column = ref([{label: "ID", prop: "id",width:90},{label: "钩子名称", prop: "webhook_name",width:140},
  {label: "地址", prop: "url",minWidth:140},{label: "事件名称", prop: "event_name"}]);

//
async function onSearch(){
  var { data } = await getDictValueList(toRaw({limit:10000}));
  dataList.value = data.data;
}
async function onGetusers(){
  var { data } = await getUserList(toRaw({limit:10000}));
  userList.value = data.data;
}
const api_url_array = [
  'openapi.oemapps.com'
]
onMounted(() => {
  onSearch();
  onGetusers();
});
</script>

<template>

  <el-form ref="ruleFormRef" size="small" :model="newFormInline" :rules="formRules" label-width="105px">
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="店铺Id" prop="id">
          <el-input  v-model="newFormInline.id" disabled />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="店铺名称" prop="shop_name">
          <el-input v-model="newFormInline.shop_name" disabled />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="结算币种" prop="standard_code">
          <el-select v-model="newFormInline.standard_code" placeholder="请输入币种" class="!w-full" disabled>
            <el-option class="w-full" v-for="(item, index) in dataList.filter(x=>x.dic_id==2)" :key="index" :label="item.value" :value="item.label"/>
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="汇率" prop="exchange_rate">
          <el-input-number v-model="newFormInline.exchange_rate" disabled placeholder="支持两个小数" class="!w-full" :min="0.01" :step="0.01" controls-position="right" />
        </el-form-item>
      </re-col>

      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="主域名" prop="shop_domain">
          <el-input v-model="newFormInline.shop_domain" disabled placeholder="主域名" class="!w-full" controls-position="right" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="时区" prop="time_zone">
          <el-input v-model="newFormInline.time_zone" disabled placeholder="时区" class="!w-full" controls-position="right" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="服务开始时间" prop="starts_at">
          <el-input v-model="newFormInline.starts_at" disabled placeholder="服务开始时间戳" class="!w-full" controls-position="right" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="服务截止时间" prop="ends_at">
          <el-input v-model="newFormInline.ends_at" disabled placeholder="服务截止时间戳" class="!w-full" controls-position="right" />
        </el-form-item>
      </re-col>



      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="套餐版本ID" prop="package_id">
          <el-input v-model="newFormInline.package_id" disabled placeholder="套餐版本ID" class="!w-full" controls-position="right" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="订阅状态" prop="subscription_status">
          <el-input v-model="newFormInline.subscription_status" disabled placeholder="订阅状态" class="!w-full" controls-position="right" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="套餐版本名称" prop="package_format">
          <el-input v-model="newFormInline.package_format" disabled placeholder="套餐版本名称" class="!w-full" controls-position="right" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="订阅状态" prop="package_type">
          <el-input v-model="newFormInline.package_type" disabled placeholder="套餐类型标识" class="!w-full" controls-position="right" />
        </el-form-item>
      </re-col>


      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="接口网址" prop="api_url">
          <el-select v-model="newFormInline.api_url" placeholder="请填写接口网址" class="!w-full" clearable allow-create filterable>
            <el-option class="w-full" v-for="item in api_url_array" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24" v-if="!newFormInline.id">
        <el-form-item label="密钥">
          <el-input v-model="newFormInline.api_secretkey" clearable placeholder="填写接口密钥" class="!w-full" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="店铺分组"  prop="group">
          <el-select v-model="newFormInline.group" placeholder="请选择店铺分组" class="!w-full" filterable>
            <el-option class="w-full" v-for="(item, index) in newFormInline.groupList" :key="index" :label="item.group_name" :value="item.id"/>
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="状态">
          <el-switch v-model="newFormInline.status2"
            inline-prompt  :active-value="1"
            :inactive-value="2"  active-text="启用"
            inactive-text="停用"
            :style="switchStyle"
          />
          <span style="margin-left: 20px">{{newFormInline.status==1?'Saas启用':'Saas停用'}}</span>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="业务员" prop="salesman_id">
          <el-select v-model="newFormInline.salesman_id" placeholder="请选择业务员（默认不用填）" class="!w-full" clearable filterable>
            <el-option class="w-full"  v-for="(item, index) in userList"
                       :key="index" :label="item.username"  :value="item.id" :disabled="item.status!=1"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col>
        <el-form-item label="whatsapp轮询">
          <el-input v-model="newFormInline.wa" placeholder="格式‘whatsapp号|欢迎语’，多条以回车换行" type="textarea"/>
        </el-form-item>
      </re-col>
      <re-col>
        <el-form-item label="备注">
          <el-input v-model="newFormInline.remark" placeholder="请输入备注信息" type="textarea"/>
        </el-form-item>
      </re-col>
      <re-col v-if="newFormInline.id>0">
        <el-form-item label="域名列表">
          {{newFormInline.domains?.length>0?newFormInline.domains.map(x=>x.id+':'+x.domain_name+'('+x.status+')').join("；"):'-'}}
        </el-form-item>
        <pure-table size="small" :data="newFormInline.domains" :columns="log_column"/>
      </re-col>
      <re-col v-if="newFormInline.id>0">
        <el-form-item label="钩子事件">
        </el-form-item>
        <pure-table size="small" :data="newFormInline.webhooks" :columns="webhooks_column"/>
      </re-col>
    </el-row>
  </el-form>

</template>
